<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<title>flex和block的区别</title>
<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .block-or-flex{
        width: 100%;
        height: 200px;
        background-color: #eee;
        display: block;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 16px;
        /* 控制子元素垂直方向的对齐方式：自动伸缩填充 */
        align-items: stretch;
    }
    .item {
        height: 50px;
        background-color: red;
        margin: 10px 0;
    }
</style>
</head>

<body>
    <div class="block-or-flex">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div>
        <label for="block">
            block
            <input type="radio" name="display" checked id="block" value="block" />
        </label>
        <label for="flex">
            flex
            <input type="radio" name="display" id="flex" value="flex" />
        </label>
    </div>

<script>
    const blockOrFlex = document.querySelector('.block-or-flex');
    const radio = document.querySelectorAll('input[name="display"]');

    radio.forEach(item => {
        item.addEventListener('change', function () {
            blockOrFlex.style.display = this.value;
            document.querySelectorAll('.item').forEach(item => {
                if (this.value === 'block') {
                    item.style.width = '100%';
                    item.style.height = '50px';
                } else {
                    item.style.width = '50px';
                    item.style.height = 'initial';
                }
            })
        })
    })
</script>
</body>
</html>